<template>
    <div class="process" :style="{ display: judgeExistError(state.process) || state.process.staticDataState.state != 'NO_CALCULATE' ? '' : 'none' }">
        <el-steps>
            <el-step
                :status="handleStepState('NO_CALCULATE', state.process)"
                title="开始"
                :icon="handleProcessState('NO_CALCULATE', state.process)"
            ></el-step>
            <el-step
                :status="handleStepState('DATA_ETL', state.process)"
                title="数据加载"
                :icon="handleProcessState('DATA_ETL', state.process)"
            ></el-step>
            <el-step
                :status="handleStepState('IN_CALCULATE', state.process)"
                title="计算中"
                :icon="handleProcessState('IN_CALCULATE', state.process)"
            ></el-step>
            <el-step
                :status="handleStepState('CALULATE_FINISH', state.process)"
                title="完成"
                :icon="handleProcessState('CALULATE_FINISH', state.process)"
            ></el-step>
        </el-steps>
        <div class="detail">
            <span>开始时间:</span>
            <span class="value">{{ state.process.calculateStartDate }}</span>
            <span>
                {{
                    ['BEFOR_ETL', 'TOGETHER_ETL', 'AFTER_ETL', 'IN_CALCULATE'].includes(state.process.staticDataState.state)
                        ? '当前时间:'
                        : '完成时间:'
                }}
            </span>
            <span class="value">
                <span style="display: inline-block; min-width: 100px">
                    {{
                        ['BEFOR_ETL', 'TOGETHER_ETL', 'AFTER_ETL', 'IN_CALCULATE'].includes(state.process.staticDataState.state)
                            ? currentDate
                            : state.process.calculateEndDate
                    }}</span
                >
            </span>

            <span>耗时:</span>
            <span class="value" style="margin-right: 2px; color: #ff0000; font-weight: bolder">
                <span style="display: inline-block; min-width: 10px">
                    {{
                        calcCostTime(
                            state.process.calculateStartDate,
                            ['BEFOR_ETL', 'TOGETHER_ETL', 'AFTER_ETL', 'IN_CALCULATE'].includes(state.process.staticDataState.state)
                                ? currentDate
                                : state.process.calculateEndDate
                        )
                    }}
                </span>
            </span>
            &nbsp;秒
            <span>总数/成功数/失败数/过滤数:</span>
            <span class="value">
                {{ state.process.totalAmount }}/ {{ state.process.successAmount }}/ {{ state.process.errorAmount }}/
                {{ state.process.filterAmount }}</span
            >
            <span>计算结果提交状态:</span>
            <span class="value">{{ state.process.commitEnd ? '完成' : '未完成' }}</span>
            <span>计算连续违规天数:</span>
            <span class="value" v-if="!state.process.calculateProhibitionDate">未完成</span>
            <span v-else-if="!state.process.calculateProhibitionDateErrorMsg" class="value">完成</span>
            <el-tooltip v-else effect="dark" :content="state.process.calculateProhibitionDateErrorMsg" placement="top-start">
                <span class="value">错误</span>
            </el-tooltip>
        </div>
        <el-divider></el-divider>
    </div>
</template>
<script lang="ts">
import { login } from '@/common/api/sessionAuth';
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import XEUtils from 'xe-utils';
@Component({
    name: 'StaticCalcTimeChart',
    components: {},
})
export default class StaticCalcTimeChart extends Vue {
    @Prop() state: any;

    // 当前激活状态
    private active: number = 4;

    private processTime = null;

    private currentDate: string = '';

    // 图标
    private icons = {
        success: 'el-icon-circle-check',
        loading: 'el-icon-loading',
        err: 'el-icon-circle-close',
        wait: 'el-icon-warning-outline',
    };

    @Watch('state', { immediate: true, deep: true })
    private changeProcess() {
        // 开始时间
        this.handleProcessTime(this.state.process.staticDataState.state);
    }

    // 定时器
    private handleProcessTime(status: string): void {
        // console.log(status, 'status');
        if (['BEFOR_ETL', 'TOGETHER_ETL', 'AFTER_ETL', 'IN_CALCULATE'].includes(status)) {
            if (this.processTime) {
                return;
            }
            this.processTime = setInterval(() => {
                this.currentDate = XEUtils.toDateString(new Date(), 'yyyy-MM-dd HH:mm:ss').toString();
            }, 1000);
        } else {
            if (this.processTime) {
                clearInterval(this.processTime);
                this.processTime = null;
            }
        }
    }

    private beforeDestroy(): void {
        if (this.processTime) {
            clearInterval(this.processTime);
            this.processTime = null;
        }
    }

    // 费时计算
    private calcCostTime(startTime: string, endTime: string) {
        if (!startTime || !endTime) {
            return '';
        }
        return (new Date(endTime).getTime() - new Date(startTime).getTime()) / 1000;
    }

    /**
     * 处理加载状态
     * field 处理字段
     * 返回 finish/wait
     */
    private handleStepState(field, process): string {
        // console.log(process.staticDataState.state, 'process.staticDataState.state');
        if (process.staticDataState.state === 'CALULATE_FINISH') {
            return 'finish';
        }
        if (field === 'NO_CALCULATE') {
            return 'finish';
        } else if (field === 'DATA_ETL') {
            if (['BEFOR_ETL', 'TOGETHER_ETL', 'AFTER_ETL', 'IN_CALCULATE', 'CALULATE_FINISH'].includes(process.staticDataState.state)) {
                return 'finish';
            } else if (
                process.staticDataState.state === 'NO_CALCULATE' &&
                ((process.staticDataState.beforeEtlInitErrors && process.staticDataState.beforeEtlInitErrors.length > 0) ||
                    (process.staticDataState.togetherEtlInitErrors && process.staticDataState.togetherEtlInitErrors.length > 0) ||
                    (process.staticDataState.afterEtlInitErrors && process.staticDataState.afterEtlInitErrors.length > 0))
            ) {
                return 'error';
            } else {
                return 'wait';
            }
        } else if (field === 'IN_CALCULATE') {
            if (['IN_CALCULATE', 'CALULATE_FINISH'].includes(process.staticDataState.state)) {
                return 'finish';
            } else {
                return 'wait';
            }
        } else if (field === 'CALULATE_FINISH') {
            if (['CALULATE_FINISH'].includes(process.staticDataState.state)) {
                return 'finish';
            } else {
                return 'wait';
            }
        } else {
            return 'wait';
        }
    }

    /**
     * 处理加载状态
     * field 处理字段
     * 返回图标状态
     */
    private handleProcessState(field: string, process: any) {
        // console.log(process.staticDataState.state);
        if (process.staticDataState.state === 'CALULATE_FINISH') {
            return this.icons.success;
        }
        if (field === 'NO_CALCULATE') {
            return this.icons.success;
        } else if (field === 'DATA_ETL') {
            if (['BEFOR_ETL', 'TOGETHER_ETL', 'AFTER_ETL'].includes(process.staticDataState.state)) {
                return this.icons.loading;
            } else if (['IN_CALCULATE', 'CALULATE_FINISH'].includes(process.staticDataState.state)) {
                return this.icons.success;
            } else if (
                process.staticDataState.state === 'NO_CALCULATE' &&
                ((process.staticDataState.beforeEtlInitErrors && process.staticDataState.beforeEtlInitErrors.length > 0) ||
                    (process.staticDataState.togetherEtlInitErrors && process.staticDataState.togetherEtlInitErrors.length > 0) ||
                    (process.staticDataState.afterEtlInitErrors && process.staticDataState.afterEtlInitErrors.length > 0))
            ) {
                return this.icons.err;
            } else {
                return this.icons.wait;
            }
        } else if (field === 'IN_CALCULATE') {
            if (['IN_CALCULATE'].includes(process.staticDataState.state)) {
                return this.icons.loading;
            } else if (['CALULATE_FINISH'].includes(process.staticDataState.state)) {
                return this.icons.success;
            } else {
                return this.icons.wait;
            }
        } else if (field === 'CALULATE_FINISH') {
            if (['CALULATE_FINISH'].includes(process.staticDataState.state)) {
                return this.icons.success;
            } else {
                return this.icons.wait;
            }
        } else {
            return this.icons.wait;
        }
    }

    // 判断是否显示进度信息
    private judgeExistError(process: any): boolean {
        if (!process || !process.staticDataState || process.staticDataState.state !== 'NO_CALCULATE') {
            return false;
        }
        if (process.staticDataState.beforeEtlInitErrors && process.staticDataState.beforeEtlInitErrors.length > 0) {
            return true;
        } else if (process.staticDataState.togetherEtlInitErrors && process.staticDataState.togetherEtlInitErrors.length > 0) {
            return true;
        } else if (process.staticDataState.afterEtlInitErrors && process.staticDataState.afterEtlInitErrors.length > 0) {
            return true;
        } else {
            return false;
        }
    }
}
</script>
<style lang="scss" scoped>
.process {
    /deep/ .el-step__icon.is-icon {
        width: 30px;
    }
    /deep/ .el-step__main {
        position: absolute;
        top: -8px;
        left: 30px;
    }
    /deep/.el-step__line {
        height: 1px;
        top: 11px;
        left: 75px;
        right: 5px;
    }
    .el-steps--horizontal {
        width: 96%;
        .el-step {
            &:nth-child(2) {
                /deep/.el-step__line {
                    left: 110px !important;
                }
            }
            &:nth-child(3) {
                /deep/.el-step__line {
                    left: 90px !important;
                }
            }
        }
    }

    /deep/.el-step__title,
    .is-wait {
        width: max-content;
    }
    /deep/ .el-step__title.is-error {
        color: red;
    }
    .detail {
        margin-top: 10px;
        .value {
            margin: 0px 10px;
            color: #ff0000 !important;
            font-weight: bolder;
            font-size: 13px;
        }
    }
}
/deep/ i.el-step__icon-inner.el-icon-circle-check {
    color: rgb(135, 208, 104);
}

/deep/ i.el-step__icon-inner.el-icon-close {
    color: red;
}

/deep/ .el-step__title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
}

/deep/ .el-step__line-inner {
    border-width: 0.5px !important;
    width: 100% !important;
}
</style>
